<template>
  <div>
    <div class="div1">
      <div class="div2">
        <!-- 左右分开 -->
      <div style="width: 74%;float: left;">
        <!-- 主图 -->
        <div class="bidding_details">
          <div class="bidding_details_one">
              <div style="height: 550px;width:40%;float: left;">
                <el-carousel trigger="click">
                  <el-carousel-item v-for="item in this.commInfo.imgId==null?[]:this.commInfo.imgId.split(',')" :key="item">
                    <el-image style="width: 100%;height:546px;" :src="'http://101.43.223.224:8765/image/getImageById?id='+item"></el-image>
                  </el-carousel-item>
                </el-carousel>
              </div>
              <div style="height: 550px;width:60%;float: left;">
                <!-- 商品名称 -->
                <div style="width:95%;height:24px;line-height: 60px;margin-left:5%;">
                  <p style="
                width: 90%;
                height: 22px;
                font: 700 22px / 22px Arial, 'microsoft yahei';
                color: #1b1b1b;
                font-size: 18px;
                font-weight: 700;
                margin-top: 25px;
                margin-bottom: 7px;
                margin-left: 20px;">
                  <span>{{ commInfo.itemName }}</span>
                </p>
                </div>
                <div style="background-color: rgb(247, 247, 247);margin-top: 20px; padding-bottom: 14px;width: 100%;">
                <!-- 距离结束时间 -->
                <div style="width:95%;height:60px;line-height: 60px;margin-left:5%;">
                  <span style="color: #333;margin-right: 20px;font-size: 14px;font-weight: 700; margin-left: 20px;">距结束</span>
                  <span style="display: inline-block;font-size: 22px;font-weight: bold;" v-if="jjs">
                    <CountDown1 class="countDown"
                        v-on:start_callback="countDownS_cb(1)"
                        v-on:end_callback="countDownE_cb(1)"
                        :currentTime=startTimes
                        :startTime=endTimes
                        :endTime=startTimes
                        :dayTxt="'天'"
                        :hourTxt="'小时'"
                        :minutesTxt="'分钟'"
                        :secondsTxt="'秒'">
                    </CountDown1>
                  </span>
                  <span style="color: #333;margin-right: 20px;font-size: 14px;font-weight: 700; margin-left: 20px;" v-if="jjs1">已结束</span>
                </div>
                <!-- 当前出价 -->
                <div style="width:95%;height:70px;margin-left:5%;line-height: 60px;">
                  <!-- 价格 -->
                  <div style="display: inline-block; vertical-align: bottom;height: 70px;">
                    <span style="color: #333;margin-right: 20px;font-size: 14px;font-weight: 700; margin-left: 20px;">当前价</span>
                    <span style="color: #d7000f;font-size: 36px;font-weight: bold;font-family: Tahoma;">{{basePrice!=null?'￥'+basePrice:'暂无出价'}}</span>
                    <!-- 出价人 -->
                    <span style="color: #333;margin-right: 20px;font-size: 14px;font-weight: 700; margin-left: 30px;">竞买人</span>
                    <span style="font-weight: bold; font-size: 20px;">{{ commInfo.bidder }}</span>
                  </div>
                </div>
                <!-- 出价input -->
                <div style="width:95%;height:60px;line-height: 50px;margin-left:5%;">
                  <span style="color: #333;margin-right: 20px;font-size: 14px;font-weight: 700; margin-left: 20px;letter-spacing:14px">出价</span>
                  <el-input-number class="addPriceInput" v-model="num" controls-position="right" :max="1000000 " style="border-radius: 0;"></el-input-number>
                </div>
                  <!-- 出价按钮-->
                <div style="width:95%;height:60px;line-height: 60px;margin-left:5%;margin-top: 10px;">
                  <el-button style="margin-left:20px; background-color: #d7000f;color: #fff;width: 150px;height: 50px;font-size: 16px;border: none;outline: none;margin-right: 40px;border-radius:40px" @click="bid" v-if="lgan">出价竞拍</el-button>
                  <el-button style="background-color: olivedrab;color: #fff;width: 190px;height: 50px;font-size: 16px;border: none;outline: none;margin-right: 40px;" @click="bid" v-if="loading" :loading="isLoading">请您三秒后再出价</el-button>
                  <el-button @click="reservationBid" style="background-color: #000;color: #fff;width: 150px;height: 50px;font-size: 16px;border: none;outline: none;border-radius:40px; margin-left: 29px;" v-if="lganyy">预约出价</el-button>
                  <el-button type="info" plain disabled style="width: 377px;height: 60px;" v-if="ygan">竞拍已结束</el-button>
                </div>
              </div>
              <!-- 用户报名 提醒… -->
              <div style="width:90%;height:auto;padding:16px 0; margin: 0 5%; border-bottom: 1px solid #EEE; font-size: 14px;
              color: #666;text-align: right;">
                <div style="display: inline-block;height: 22px;line-height: 22px">
                  <span style="margin-right: 10px;color: #a47f1a;font-size: 18px;display: inline-block;vertical-align: middle;">47</span>
                  <span style="display: inline-block;vertical-align: middle;">人报名</span>
                  <span style="    display: inline-block;
                  width: 1px;
                  height: 15px;
                  background-color: #ccc;
                  margin: 0 18px;
                  vertical-align: middle;"></span>
                </div>
                <div style="display: inline-block; height: 22px;line-height: 22px">
                  <span style="margin-right: 10px;color: #a47f1a;font-size: 18px;display: inline-block;vertical-align: middle;">5</span>
                  <span style="display: inline-block;vertical-align: middle;">人设置提醒</span>
                  <span style="    display: inline-block;
                  width: 1px;
                  height: 15px;
                  background-color: #ccc;
                  margin: 0 18px;
                  vertical-align: middle;"></span>
                </div>
                <div style="height: 22px ;line-height: 22px;display: inline-block;">
                  <span style="margin-right: 10px;color: #a47f1a;font-size: 18px;  display: inline-block;vertical-align: middle;">14</span>
                  <span style="display: inline-block;vertical-align: middle;">次围观</span>
                </div>
              </div>
              <!-- 拍品 详情 -->
                <div style="width:95%;height:150px;margin-left:5%;">
                   <table style="width:100%" class="shoptab">
                    <tr>
                      <td style="width:33.3%"><div>起拍价：{{currentPrice}}元</div></td>
                      <td style="width:33.3%"><div>保证金：{{commInfo.earnestMoney}}元</div></td>
                      <td style="width:33.3%"><div>加价幅度：1000元</div></td>
                    </tr>
                     <tr>
                      <td style="width:33.3%"><div>保留价：有</div></td>
                      <td style="width:33.3%"><div>竞买时长：45分钟</div></td>
                      <td style="width:33.3%"><div>延时：5分钟</div></td>
                    </tr>
                    <tr>
                      <td style="width:33.3%"><div>交货方式：{{commInfo.transactionType == 1 ? '自提': '邮寄'}}</div></td>
                      <td style="width:33.3%"><div>交货地点：{{ commInfo.transactionAddress }}</div></td>
                      <td style="width:33.3%"><div>会员免佣金</div></td>
                    </tr>
                    <tr>
                      <td style="width:33.3%"><div>重量：{{commInfo.weight}}</div></td>
                      <td style="width:33.3%"><div>数量：{{commInfo.number}}</div></td>
                    </tr>
                   </table>
                </div>
              </div>
          </div>
        </div>
         <!-- 竞拍流程 -->
        <div style="width: calc(100% - 2px);height: 70px;background-color: #fff;border: 1px solid #eee;border-top: 0" class="flow">
          <div style="width:10%;height: 70px;line-height: 70px;text-align: center;font-size: 14px;float: left;font-weight: 400;">
            <span style="margin-left:10px;">竞拍流程：</span>
          </div>
          <div style="width: 89.9%;height: 70px;float: left;line-height: 70px; " class="flowR">
            <div>
              <img src="./../assets/服务.png">
              <span >现场看货</span>
            </div>
            <p></p>
            <div>
              <img src="./../assets/红包.png">
              <span >交保证金</span></div><p></p>
            <div>
              <img src="./../assets/拍卖.png">
              <span >出价竞拍</span></div><p></p>
            <div>
              <img src="./../assets/拍卖.png">
              <span >竞拍成功</span></div><p></p>
            <div>
              <img src="./../assets/交易.png">
              <span >支付货款</span></div><p></p>
            <div>
              <img src="./../assets/金融圈.png">
              <span>到货确认</span></div>
          </div>
        </div>
        <!--  详情图片 -->
        <div style="width: calc(100% - 2px);text-align: center;padding-top:20px;border: 1px solid #eee;border-top: 0;height: auto;">
          <!-- 详情 -->
          <h3 style="width: 100%;font-size:20px;font-weight: 700;height: 40px;line-height: 40px;letter-spacing: 6px;">
            拍品图片</h3>
          <el-image style="width: 900px; height: 600px; margin-top: 20px;" v-for="item in this.commInfo.imgViewId==null?[]:this.commInfo.imgViewId.split(',')" :src="'http://101.43.223.224:8765/image/getImageById?id='+item" :key="item"></el-image>
        </div>
      </div>
      <!--右边  -->
      <div style="width: 25%;float: left;">
        <!-- 出价记录 -->
        <div class="bidding_details_two" >
          <p style="text-align: left;margin-top: 15px;margin-bottom: 15px; font-size: 16px; font-weight: 700;color: rgb(51, 51, 51);">出价记录({{ bidSum }})</p>
          <div>
            <p style="text-align: left; font-size: 14px;color: rgb(51, 51, 51);font-weight: 600; ">
              <span style="float: left;width: 25%;">状态</span>
              <span style="float: left;width: 25%;">竞买人</span>
              <span style="width: 50%;">价格</span>
            </p>
            <div style="width: 100%;height: 400px;overflow: hidden">
              <p style="text-align: left;font-size: 14px;height: 30px;line-height: 30px;font-weight: 600;" v-for= '(item,index) in items' :key="index" :class="{ 'first-item': index === 0 }">
                <span style="float: left;width: 25%;">{{item.maxBidUserId}}</span>
                <span style="float: left;width: 25%;    white-space: nowrap;
                overflow: hidden;">{{item.loginName}}</span>
                <span style="width: 50%;">￥{{item.bid}}</span>
              </p>
            </div>
          </div>
          <p style="text-align:center; color: rgb(51, 51, 51);
          font-size: 14px;
          font-weight: 700;" @click="getcjjl">查看更多 &nbsp;&nbsp;></p>
          <!-- 出价记录弹出列表 -->
          <el-drawer
            title="出价记录"
            :visible.sync="drawer"
            >
            <div style="padding: 0 20px;">
              <p style="text-align: center; height: 30px;line-height: 30px;">
                <span style="float: left;width: 10%;font-size: 16px">状态</span>
                <span style="float: left;width: 20%;font-size: 16px;">竞买人</span>
                <span style="float: left;width: 30%;font-size: 16px">价格</span>
                <span style="float: left;width: 40%;font-size: 16px">时间</span>
              </p>
              <p v-for= '(item,index) in itemsjl' :key="index" :class="{ 'first-item': index === 0 }" style="width:100%;text-align: center;height:30px;line-height:30px;">
                <span style="float: left;width: 10%;font-size: 16px">{{item.maxBidUserId}}</span>
                <span style="float: left;width: 20%;font-size: 16px">{{item.loginName}}</span>
                <span style="float: left;width: 30%;font-size: 16px">{{item.bid}}</span>
                <span style="float: left;width: 40%;font-size: 16px">{{item.bidTime}}</span>
              </p>
            </div>

          </el-drawer>
        </div>
        <!-- 二维码 -->
        <div class="QCode" style="width:100%;border: 1px solid #eee;border-top: 0;border-left: 0;text-align: center;padding: 20px 0;">
          <p style="display: inline-block;height: 30px;line-height: 30px;width:100%;font-weight: 700;font-size: 16px;">扫描二维码到手机小程序</p>
          <img  style="display: inline-block;margin-top: 20px;" src="https://img.axureshop.com/5f/7a/2f/5f7a2fd7263e4e95897c8cd096b23108/images/%E9%A6%96%E9%A1%B5/u564.svg">
        </div>
      </div>
      </div>
        <!-- 二维码 -->
        <el-row style="padding: 40px 20%;background-color: #eee;margin-top: 20px;">
          <el-col :span="16" style="text-align: center;">
              <div style="width: 30%;height: 200px;float: left;">
                <img style="width: 100px;height:100px" src="https://img.axureshop.com/5f/7a/2f/5f7a2fd7263e4e95897c8cd096b23108/images/%E9%A6%96%E9%A1%B5/u561.svg">
                <div style="font-size: 18px;margin-top: 20px;">微信服务号</div>
                <p style="margin-top:30px;font-size: 14px;">一手消息随时掌握</p>
              </div>
              <div style="width: 30%;height: 200px;float: left;">
                <img style="width: 100px;height:100px" src="https://img.axureshop.com/5f/7a/2f/5f7a2fd7263e4e95897c8cd096b23108/images/%E9%A6%96%E9%A1%B5/u564.svg">
                <div style="font-size: 18px;margin-top: 20px;">微信小程序</div>
                <p style="margin-top:30px;font-size: 14px;">随时随地交易</p>
              </div>
          </el-col>
          <el-col :span="8"><div>
            <p style="margin-top: 30px;">
              <span style="font-size: 18px;">关于我们</span>
            </p>
            <p style="font-size: 14px;height: 30px;line-height: 30px;margin-top: 30px;">邮编：518000</p>
            <p style="font-size: 14px;height: 30px;line-height: 30px;">全国免费服务热线：400-886-0000</p>
            <p style="font-size: 14px;height: 30px;line-height: 30px;">地址：深圳市罗湖区爱国路金通大厦B座24楼2408房</p>
          </div></el-col>
        </el-row>

        <!-- 底部 -->
        <div class="bot" style="background-color: #333;color: #fff;
        height: 50px;line-height: 50px; font-size: 14px; padding: 0 20%;">
          <p style="float: left;opacity: .5;">copyright2018-2028全拍网科技（深圳）有限公司版权所有&nbsp;&nbsp;粤ICP备18118186号</p>
          <p style="float: right;opacity: .5;">拍卖经营许可证&nbsp;&nbsp;|&nbsp;&nbsp;营业执照&nbsp;&nbsp;|&nbsp;&nbsp;粤公网安备44030302001779号</p>
        </div>
        <!-- 预约出价弹窗 -->
        <el-dialog
            title="预约出价"
            :visible.sync="dialogVisible"
            width="33%">
          <div>
            <div style="padding: 10px;" class="yuyue">
              <span style="margin-right: 10px;font-size:16px;display: inline-block;vertical-align: middle;">当前价</span>
              <span style="color: #d7000f;font-size:26px;font-weight: 700;display: inline-block;vertical-align: middle;">￥{{currentPrice}}</span>
              <el-input style="width: 220px;margin-left:80px;display: inline-block;vertical-align: middle;"></el-input>
            </div>
            <div>
              <p style="height:40px;line-height: 20px;">&nbsp;&nbsp;&nbsp;&nbsp;1.预约出价：让系统在标的结束时间钱1分钟自动替您出价，但超过结束时间无法使用此功能。</p>
              <p style="height:20px;line-height: 20px;">&nbsp;&nbsp;&nbsp;&nbsp;2.可以输入您的心里最高价位，系统每次按照加价规则小幅加价。</p>
              <p style="height:20px;line-height: 20px;">示例：标的加价规则100元/次</p>
              <p style="height:40px;line-height: 20px;">&nbsp;&nbsp;&nbsp;&nbsp;当年您预约价格2000元，其他竞买人出价1500，系统会自动帮您加价至1600，
                当到结束时间无人出价则以1600成交，如有人继续出价超过2000，系统则不再继续出价，并消息提醒您</p>
            </div>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button style="background-color:#d7000f;color:#fff;width:100%;" @click="dialogVisible = false">确认预约</el-button>
          </span>
        </el-dialog>
        <!-- 中标提醒 -->
        <el-dialog
            title="中标提醒"
            :visible.sync="dialogVisible1"
            width="30%">
          <div>
            <div style="float: left;">
              <img style="width: 60px;height:60px;margin-left: 50px;float: left;"
                  src="./../assets/拍卖2.png">
              <div style="width: 436px;position: relative;top: 21px;left:20px;font-size: 18px;">恭喜{{zgjr}}，以，
                <span style="color: red;">{{zgj}}</span>成功竞获该标的!
              </div>
            </div>
            <div style="float: left;margin-bottom: 40px;margin-top: 20px;">
              <p style="height: 40px;line-height: 20px;">&nbsp;&nbsp;&nbsp;&nbsp;1.您可在我的竞价中，查看已中标的竞品，在24小时确认订单，否则视为违约，
                <span @click="goToMyBidding" style="color: #d7000f;">>>前往我的竞价</span>
              </p>
              <p style="height: 20px;line-height: 20px;">&nbsp;&nbsp;&nbsp;&nbsp;2.保证金不计入贷款，交易完成后将在1-3个工作日原路退还</p>
            </div>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button style="background-color:#d7000f;color:#fff;width: 100%;" @click="dialogVisible = false">确认竞品</el-button>
          </span>
        </el-dialog>
    </div>
  </div>
</template>
<script>
import CountDown1 from 'vue2-countdown'
export default {
  components: {
    CountDown1
  },
  data () {
    return {
      num: 1000, // 出价价钱
      dialogVisible: false, // 预约出价的弹窗值
      dialogVisible1: false, // 钟表提醒的弹窗值
      path: '', // 连接websocket路径
      socket: '',
      currentPrice: 0, // 起拍价
      basePrice: this.currentPrice, // 当前价
      items: [],
      items1: [],
      items2: [],
      itemsjl: [], // 历史记录存数据
      itemsjl1: [], // 历史记录存数据
      bidSum: 0, // 出价记录总数
      currentTime: 0,
      startTimes: 0, // 倒计时
      endTimes: 0, // 倒计时
      commInfo: { // 商品信息
        id: ''
        // itemName: '', // 物品名称
        // bidder: '', // 竞买人
        // goodsNumber: '', // 商品编号
        // earnestMoney: '', // 保证金
        // weight: '', // 重量
        // number: '', // 数量
        // transactionType: '', // 加价幅度
        // imageId: []
      },
      loginData: '', // 登录信息
      userId: 0, // 用户登录id
      userName: '', // 用户登录名称
      roomId: 0, // 房间id（用物品id来做）
      orderInfo: { // 订单信息
        bidder: 0, // 竞买人id
        productId: '', // 商品id
        productName: '', // 商品名称
        quantity: '', // 数量
        startingPrice: '', // 起拍价
        transactionPrice: 0, // 成交价
        earnestMoney: '', // 保证金
        durationOfBidding: '', // 竞买时长
        commissionRate: '', // 佣金比例
        deliveryType: '', // 交货方式
        deliveryPoints: '', // 交货地点
        addressId: '', // 地址id
        transactionTotal: '', // 总价
        imageId: [] // 图片id
      },
      drawer: false, // 右侧抽屉
      jjs: true, // 距结束时间显示和隐藏
      jjs1: false, // 距结束时间显示和隐藏
      lgan: true, // 出价竞拍和预约出价的按钮显示和隐藏
      lganyy: true, // 出价竞拍和预约出价的按钮显示和隐藏
      ygan: false, // 出价竞拍和预约出价的按钮显示和隐藏
      zgjr: '',
      zgj: '',
      goodsId: this.$route.query.goodsId, // 当前竞拍商品id
      goodsData: {}, // 当前竞拍商品id
      lockReconnect: false, // 是否真正建立连接
      timeout: 10 * 1000, // 30秒一次心跳
      timeoutObj: null, // 心跳心跳倒计时
      serverTimeoutObj: null, // 心跳倒计时
      timeoutnum: null, // 断开 重连倒计时
      lastClickTime: null, // 出价按钮冷却
      loading: false, // 加载中按钮
      isLoading: true // 加载动画
    }
  },
  mounted () {
    this.getLoginInfo() // 获取登录信息
    this.getGoodsById() // 查询物品信息
    this.init() // 连接websocket
    this.getRecordOfBid()
  },
  methods: {
    // 获取登录信息
    getLoginInfo () {
      this.loginData = JSON.parse(sessionStorage.getItem('userInfo')) // 获取登录信息
      this.userId = this.loginData.id
      this.userName = this.loginData.userName
    },
    // 查询当前商品信息
    getGoodsById () {
      this.$axios.get('BidRecordController/getItemInfoById', {
        params: {
          id: this.goodsId
        }
      }).then(res => {
        if (res.data.flag) {
          this.commInfo = res.data.obj
          this.commInfo.bidder = this.commInfo.contactName // 竞买人
          this.commInfo.itemName = this.commInfo.goodsName // 物品名称
          this.initdata()
          // this.setShowStatus()
        } else {
          this.myMessage('error', '商品信息加载失败')
        }
      })
    },
    // 获取一些信息
    initdata () {
      this.roomId = this.commInfo.id // 获取物品id作为拍卖房间id
      this.startTimes = parseInt(new Date().getTime() / 1000) // 物品开始时间
      this.endTimes = parseInt(new Date(this.commInfo.endTime).getTime() / 1000) // 物品结束时间
      this.currentPrice = this.commInfo.startPrice // 起拍价
      this.getCurrentPrice() // 得到当前物品价格
    },
    // 连接WebSocket
    init () {
      this.path = 'ws://127.0.0.1:8088/websocket/room' + this.goodsId + '/' + this.userId + '/' + this.userName // 连接WebSocket路径
      if (typeof (WebSocket) === 'undefined') {
        this.myMessage('error', '您的浏览器不支持WebSocket')
      } else {
        // 实例化socket
        this.socket = new WebSocket(this.path)
        // this.socket.timeout = 0
        // 监听socket连接
        this.socket.onopen = this.open
        // 监听socket错误信息
        this.socket.onerror = this.error
        // 监听socket消息
        this.socket.onmessage = this.getMessage
      }
    },
    open: function () {
      console.log('socket连接成功')
      // this.start() // 开启心跳
    },
    error: function (e) {
      console.log(e.code + ' ' + e.reason + ' ' + e.wasClean)
      console.log(e)
      // this.reconnect()
      console.log('我是error我被触发了，执行了重连方法')
    },
    getMessage: function (msg) {
      this.bidSum = this.bidSum + 1
      const obj = JSON.parse(msg.data)
      this.basePrice = obj.maxBid
      this.items.unshift(obj)
      this.items[0].maxBidUserId = '出局'
      this.replaceTheState()
      // 收到服务器信息，心跳重置
      // this.reset()
    },
    bid () { // 出价竞拍按钮
      // const self = this
      // const currentTime = new Date().getTime()
      // if (!this.lastClickTime || currentTime - this.lastClickTime >= 3000) {
      //   // 如果满足时间间隔大于等于3秒，则执行以下代码
      //   this.lastClickTime = currentTime
      //   const socketMsg = { basePrice: this.basePrice, price: this.num }
      //   console.log(socketMsg)
      //   this.socket.send(JSON.stringify(socketMsg))
      //   // 实现点击逻辑
      // } else {
      //   // 如果时间间隔小于3秒，则不执行任何操作，或者提示用户等待3秒后再次点击
      //   this.myMessage('warning', '请您三秒后点击')
      // }
      const currentTime = new Date().getTime()
      if (!this.lastClickTime || currentTime - this.lastClickTime >= 3000) {
        // 如果满足时间间隔大于等于3秒，则执行以下代码
        this.lastClickTime = currentTime
        if (this.items.length === 0) {
          // 设置按钮为加载状态
          this.lgan = false
          this.loading = true
          const socketMsg = { basePrice: this.basePrice, price: this.num }
          this.socket.send(JSON.stringify(socketMsg))
          // 开启定时器
          const timer = setTimeout(() => {
            // 清除定时器并将按钮恢复正常状态
            clearTimeout(timer)
            this.loading = false
            this.lgan = true
          }, 3000)
        } else if (this.userId === parseInt(this.items[0].userId)) {
          this.myMessage('warning', '您当前已是最高价,请静待别人出价')
        } else {
          // 设置按钮为加载状态
          this.lgan = false
          this.loading = true
          const socketMsg = { basePrice: this.basePrice, price: this.num }
          this.socket.send(JSON.stringify(socketMsg))
          // 开启定时器
          const timer = setTimeout(() => {
            // 清除定时器并将按钮恢复正常状态
            clearTimeout(timer)
            this.loading = false
            this.lgan = true
          }, 3000)
        }
        // 实现点击逻辑
      } else {
        // 如果时间间隔小于3秒，则不执行任何操作，或者提示用户等待3秒后再次点击
        this.myMessage('warning', '请您三秒后再出价')
      }

      // try {
      //   if (self.socket.readyState === WebSocket.OPEN) { // 如果连接正常
      //     console.log(JSON.stringify(socketMsg))
      //     self.socket.send(JSON.stringify(socketMsg))
      //   } else { // 否则重连
      //     // self.reconnect()
      //     console.log('我是bid1，我触发了重连')
      //   }
      // } catch (e) {
      //   console.log('开始重连------')
      //   // self.reconnect()
      //   console.log('我是bid2，我触发了重连')
      //   self.socket.send(JSON.stringify(socketMsg))
      // }
    },
    close: function () {
      console.log('socket已经关闭')
      // this.reconnect()
      console.log('我是close，我触发了重连')
    },
    // 重新连接
    // reconnect () {
    //   console.log('重连-----')
    //   const that = this
    //   if (that.lockReconnect) {
    //     return
    //   };
    //   console.log('重连开始-----')
    //   that.lockReconnect = true
    //   // 没连接上会一直重连，设置延迟避免请求过多
    //   that.timeoutnum && clearTimeout(that.timeoutnum)
    //   that.timeoutnum = setTimeout(function () {
    //     // 新连接
    //     that.init()
    //     that.lockReconnect = false
    //   }, 5000)
    // },
    // 重置心跳
    // reset () {
    //   const that = this
    //   // 清除时间
    //   clearTimeout(that.timeoutObj)
    //   clearTimeout(that.serverTimeoutObj)
    //   // 重启心跳
    //   that.start()
    // },
    // 开启心跳
    // start () {
    //   const self = this
    //   self.timeoutObj && clearTimeout(self.timeoutObj)
    //   self.serverTimeoutObj && clearTimeout(self.serverTimeoutObj)
    //   self.timeoutObj = setTimeout(function () {
    //     // 这里发送一个心跳，后端收到后，返回一个心跳消息，
    //     if (self.socket.readyState === 1) { // 如果连接正常
    //       self.socket.send('heartCheck')
    //     } else { // 否则重连
    //       self.reconnect()
    //       console.log('我是start，我触发了重连')
    //     }
    //     self.serverTimeoutObj = setTimeout(function () {
    //       // 超时关闭
    //       self.socket.close()
    //     }, self.timeout)
    //   }, self.timeout)
    // },
    // 前往我的竞价方法
    goToMyBidding () {
      // this.$router.push('/endOfBiddingDetails')
      alert('路径还没写')
    },
    test () {
      this.$router.push('/websocket')
    },
    reservationBid () { // 点击预约出价弹出预约出价的弹窗
      this.dialogVisible = true
    },
    myMessage (type, message) {
      this.$message({
        message: message,
        type: type
      })
    },
    getCurrentPrice () { // 得到当前物品的价格
      this.$axios.get('BidRecordController/getCurrentPrice', { params: { key: this.goodsId } }).then((res) => {
        if (res.data.obj != null) {
          this.basePrice = res.data.obj
        } else {
          this.basePrice = this.currentPrice
        }
      })
    },
    getRecordOfBid () { // 获取出价记录
      this.$axios.get('BidRecordController/getRecordOfBid', { params: { roomId: this.goodsId } }).then((res) => {
        if (res.data.obj != null) {
          const a = res.data.obj
          for (let i = 0; i < a.length; i++) {
            this.items.unshift(a[i])
            this.bidSum = this.bidSum + 1 // 渲然时出价记录总数加上
            this.items[0].maxBidUserId = '出局'
          }
          // 最新出价显示在最上面
          // this.items = []
          // const mappedArray = this.items2.map((object) => {
          //   return {
          //     userId: object.userId,
          //     bid: object.bid,
          //     maxBid: object.maxBid,
          //     bidTime: object.bidTime,
          //     maxBidUserId: '出局',
          //     roomId: object.roomId,
          //     loginName: object.loginName
          //   }
          // })
          // // 使用 Array.prototype.reverse() 方法对操作后的新数组进行翻转
          // const that = this
          // const reversedArray = mappedArray.reverse()
          // // 遍历翻转后的数组并依次渲染每个属性值到页面上
          // reversedArray.forEach((object) => {
          //   that.items.push(object)
          // })
          this.replaceTheState()
        } else {
          console.log('请联系管理员')
        }
      })
    },
    saveBidRecord () { // 存储拍卖信息
      this.$axios.post('BidRecordController/saveBidRecord', this.goodsId, {
        headers: {
          'Content-Type': 'application/json'
        }
      }).then(res => {
        if (res.data.flag) {
          this.myMessage('success', '保存成功')
        } else {
          this.myMessage('warning', '保存失败')
        }
      })
    },
    saveEndOfAuctionInfo () { // 保存拍卖结束的信息
      console.log(JSON.parse(JSON.stringify(this.items[0])))
      this.orderInfo.bidder = JSON.parse(JSON.stringify(this.items[0])).userId
      this.orderInfo.productId = this.commInfo.id
      this.orderInfo.productName = this.commInfo.goodsName
      this.orderInfo.quantity = this.commInfo.number
      this.orderInfo.startingPrice = this.currentPrice
      this.orderInfo.transactionPrice = JSON.parse(JSON.stringify(this.items[0])).maxBid
      this.orderInfo.earnestMoney = this.commInfo.earnestMoney
      this.orderInfo.durationOfBidding = this.endTimes - this.startTimes
      this.orderInfo.commissionRate = '0.5%'
      this.orderInfo.deliveryType = this.commInfo.transactionType
      this.orderInfo.deliveryPoints = this.commInfo.transactionAddress
      this.orderInfo.addressId = 0
      this.orderInfo.transactionTotal = JSON.parse(JSON.stringify(this.items[0])).maxBid
      this.orderInfo.imageId = JSON.parse(JSON.stringify(this.items[0])).imageId
      this.$axios.post('BidRecordController/saveOrder', this.orderInfo).then((res) => {
        if (res.data.flag) {
          this.myMessage('success', '成功')
        } else {
          this.myMessage('warning', '失败')
        }
      })
    },
    replaceTheState () { // 设置出价最高的人是领先状态，其余是出局
      const firstItem = this.items[0] // 因为上面数据渲染的时候倒放的，所以最后一个出价的在数组中就是第一个
      this.items[0] = { ...firstItem, maxBidUserId: '领先' } // 将它的状态替换成领先
    },
    replaceTheState1 () { // 设置出价最高的人是领先状态，其余是出局
      const firstItem = this.items[0] // 因为上面数据渲染的时候倒放的，所以最后一个出价的在数组中就是第一个
      this.itemsjl[0] = { ...firstItem, maxBidUserId: '领先' } // 将它的状态替换成领先
    },
    getcjjl () { // 查看全部出价记录
      this.drawer = true
      this.$axios.get('BidRecordController/getRecordOfBid', { params: { roomId: this.roomId } }).then((res) => {
        if (res.data.obj != null) {
          const a = res.data.obj
          for (let i = 0; i < a.length; i++) {
            this.itemsjl.unshift(a[i])
            this.itemsjl[0].maxBidUserId = '出局'
          }
          // if (res.data.obj != null) {
          //   this.itemsjl1 = res.data.obj
          //   // 最新出价显示在最上面
          //   this.itemsjl = []
          //   const mappedArray = this.itemsjl1.map((object) => {
          //     return {
          //       userId: object.userId,
          //       bid: object.bid,
          //       maxBid: object.maxBid,
          //       bidTime: object.bidTime,
          //       maxBidUserId: '出局',
          //       roomId: object.roomId,
          //       loginName: object.loginName
          //     }
          //   })
          //   // 使用 Array.prototype.reverse() 方法对操作后的新数组进行翻转
          //   const that = this
          //   const reversedArray = mappedArray.reverse()
          //   // 遍历翻转后的数组并依次渲染每个属性值到页面上
          //   reversedArray.forEach((object) => {
          //     that.itemsjl.push(object)
          //     // this.bidSum = this.bidSum + 1 // 渲然时出价记录总数加上
          //   })
          this.replaceTheState1()
        } else {
          console.log('请联系管理员')
        }
      })
    },
    countDownS_cb: function (x) { // 开始倒计时进行的回调
      // console.log(x, '开始')
    },
    countDownE_cb: function (x) { // 倒计时结束进行的回调
      this.jjs = false
      this.jjs1 = true
      this.lgan = false
      this.lganyy = false
      this.ygan = true
      this.saveBidRecord() // 保存出价历史记录
      this.saveEndOfAuctionInfo() // 保存拍卖结束的信息形成订单
      this.zgjr = JSON.parse(JSON.stringify(this.items[0])).loginName
      this.zgj = JSON.parse(JSON.stringify(this.items[0])).maxBid
      // this.myMessage('success', '恭喜' + bidder + '获得以最高价获得此次竞品')
      this.dialogVisible1 = true
    }
  }
}
</script>
<style lang="less" scoped>
  .div1{
    width: 100%;
    height: 100%;
    margin: 0 auto;
  }
  .div2{
    padding-top:10px ;
    width: 80%;
    height: 100%;
    margin: 0 auto;
    overflow: hidden;
  }
/deep/.el-icon-arrow-up:before {
    content: "\271A";
}
/deep/.el-icon-arrow-down:before {
    content: "\2013";
}
/deep/.el-input-number.is-controls-right .el-input-number__decrease {
  right: -114px;
  bottom: 1px;
  top: auto;
  left: auto;
  border-right: none;
  border-left: 1px solid #DCDFE6;
  border-radius: 0 0 4px;
}
/deep/.el-input-number__increase {
  right: -114px;
  border-radius: 0 4px 4px 0;
  border-left: 1px solid #DCDFE6;
}
/deep/.el-input-number.is-controls-right .el-input__inner {
  width: 250px;
  padding-left: 15px;
  padding-right: 50px;
  height: 45px;
}
/deep/.el-carousel__container {
  position: relative;
  height: 550px;
}
/deep/input::-webkit-input-placeholder{
  /* position: relative; */
  /* left: 30px; */
  color:red;
}
.bidding_details_two{
  color: grey;
  width: 84%;
  padding: 10px 8% ;
  height: 530px;
  border: 1px solid #eee;
  border-left: 0;
}
.bidding_details_one{
  width: calc(100% - 2px);
  height: 550px;
  border: 1px solid #eee;
}
.bidding_details{
  width: 100%;
  height: 551px;
  background-color: #fff;
}
.first-item {
  color: #d7000f;
}
/*1.显示滚动条：当内容超出容器的时候，可以拖动：*/
.el-drawer__body {
  overflow: auto;
  /* overflow-x: auto; */
}

/*2.隐藏滚动条，太丑了*/
.el-drawer__container ::-webkit-scrollbar {
  display: none;
}
/* 倒计时 */
/deep/   .countDown i{
  color: #333;
  font-size: 12px;
  font-weight: 400;
  font-style:normal
}
/deep/   .countDown span{
  color: #d7000f;
  font-size: 22px;
  font-weight: 400;
  font-style:normal;
  margin:0 5px;
}
/* 出价 */
/deep/ .addPriceInput input {
  border-radius: 0;
  font-size: 16px;
}
/deep/ .addPriceInput  .el-input__inner:focus {
    border-color: #d7000f;
    outline: 0;
}
/deep/ .addPriceInput .el-input-number__increase,/deep/ .el-input-number.is-controls-right .el-input-number__decrease{
  background-color: #EDC0CC;
    color: #fff;
    border-radius: 0;
    border: none;
}
.shoptab {
  color: rgb(102, 102, 102);
  padding-top: 10px;
  font-size: 14px;
}
.shoptab td div{
  height: 30px;
  line-height: 30px;
}
/* 拍卖流程 */
.flowR>div {
  display: inline-block;
  text-align: center;
  width: 12%;
}
.flowR div span{
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  color: #666;
}
.flowR div img {
  width:  20px;
  height: 20px;
  opacity: 0.5;
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
}
.flowR p{
  width:5.6%;
  border-bottom:2px solid #eee;
  display: inline-block;
  vertical-align: middle;
}
/* 预约 弹窗 input */
.el-input.is-active .el-input__inner,/deep/ .el-input__inner:focus {
    border-color: #d7000f;
    outline: 0;
}
</style>
